import React from 'react';
import ReactDOM from 'react-dom';

import './index.scss';

import HomeSlider from './HomeSlider.js';
import AuctionBlock from './AuctionBlock.js';
import AuctionCarList from './AuctionCarList.js';
import Recommend from './Recommend.js';
import FindCar from './FindCar.js';
import ValidateTel from '../common/ValidateTel.js';


class Index extends React.Component {
  constructor(props){
      // console.log(props);
      super(props);
  }

  componentDidMount() {


    (function($) {
      $.fn.vhAlign = function() {
        return this.each(function(i) {
          var h = Math.ceil($(this).height());
          var oh = Math.ceil($(this).outerHeight());
          var ah = window.screen.availHeight;
          var mt = Math.ceil(oh / 2);
          var w = Math.ceil($(this).width());
          var ow = Math.ceil($(this).outerWidth());
          var ml = Math.ceil(ow / 2);
          $(this).css({
            "margin-top": "-" + mt + "px",
            "top": "50%",
            "margin-left": "-" + ml + "px",
            "left": "50%",
            "width": w,
            "height": h,
            "position": "absolute"
          });
        });
      };
    })($);

    $('.cloze').on('click', function () {
      // 关闭弹窗
      $('.black-shadow').hide();
      $('.validate-tel').hide();
    });
  }

  render() {
    return (
      <div className="container">
        <div className="black-shadow"></div>
        <div className="row">
          <div className="col-xs-12" style={{ padding: 0 }}>
            <HomeSlider/>
          </div>
          <div className="col-xs-12">
            <AuctionBlock/>
          </div>
          <div className="col-xs-12">
            <AuctionCarList/>
          </div>
          <div className="col-xs-12">
            <Recommend/>
          </div>
          <div className="col-xs-12">
            <FindCar/>
          </div>
        </div>
          <ValidateTel/>
      </div>
    );
  }

}
export default Index;
